<template>
	<view>
		<view class="head-info">
				<!-- 搜索 -->
				<view class="head-search">
					<view class="icon-info" @click="onCode">
						<text class="iconfont icon-saoyisao"></text>
						<!-- <image src="/static/xiaoxi_ico.png" mode=""></image> -->
					</view>
					<view class="search" @click="onSearch">
						<view class="icon">
							<image src="/static/fdj_ico.png" mode=""></image>
						</view>
						<view class="hint">
							<text class="max">搜索</text>
							<text class="min">热门内容</text>
						</view>
					</view>
					<view class="icon-info" @click="onSkip('paycode')">
						<text class="iconfont icon-fukuanma"></text>
						<!-- <image src="/static/fkm_ico.png" mode=""></image> -->
					</view>
				</view>
				<!-- 分类列表 -->
				<view class="classify-list">
					<view class="list" v-for="(item,index) in classList"
					:class="{'action':classifyShow==index}"
					@click="onClassify(item,index)"
					:key="index">
						<text>{{item.name}}</text>
						<text class="line" v-show="classifyShow==index"></text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		name:"yd-head",
		data() {
			return {
				classList: [
					{
						id: 0,
						name: '首页',
					},{
						id: 1,
						name: '手机',
					},{
						id: 2,
						name: '男装',
					},{
						id: 3,
						name: '背包',
					},{
						id: 4,
						name: '电脑',
					},{
						id: 5,
						name: '珠宝',
					},{
						id: 6,
						name: '美妆',
					}
				],
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
				
			};
		}
	}
</script>

<style lang="scss">
.page{
	// position: absolute;
	// left: 0;
	// top: 0;
	// width: 100%;
	// height: 100%;
	// overflow-x: hidden;
	// overflow-y: auto;
	padding-bottom: 100rpx;
	background-color: #FFFFFF;
}
.head-info{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	width: 100%;
	/* #ifdef APP-PLUS||H5 */
	padding: calc(20rpx + var(--status-bar-height)) 25rpx 0;
	height: calc(200rpx + var(--status-bar-height));
	/* #endif */
	/* #ifdef MP */
	padding:0 25rpx;
	height: 170rpx;
	/* #endif */

	background-size: 100% 433rpx;
	background-color: #FFFFFF;
	overflow: hidden;
	.head-search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.icon-info{
			display: flex;
			align-items: center;
			height: 100%;
			text{
				font-size: 52rpx;
				color: #f6f6f6;
			}
			image{
				width: 42rpx;
				height: 43rpx;
			}
		}
		.search{
			display: flex;
			align-items: center;
			width: 75%;
			padding: 0 20rpx;
			height: 65rpx;
			background-color: rgba(255,255,255,0.3);
			border-radius: 10rpx;
			.icon{
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				image{
					width: 27rpx;
					height: 29rpx;
				}
			}
			.hint{
				display: flex;
				align-items: center;
				.max{
					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				.min{
					font-size: 24rpx;
					color: #F6f6f6;
					margin-left: 10rpx;
				}
			}
		}
	}
	.classify-list{
		white-space:nowrap;
		width: 100%;
		height: 100rpx;
		overflow-x: auto;
		overflow-y: hidden;
		.list{
			position: relative;
			display:inline-block;
			width: 20%;
			height: 100%;
			line-height: 100rpx;
			text-align: center;
			text{
				font-size: 28rpx;
				color: #FFFFFF;
				opacity: 0.8;
			}
			.line{
				position: absolute;
				left: 50%;
				bottom: 20rpx;
				width: 60%;
				height: 8rpx;
				background: linear-gradient(to right,#f8f893,#fe9d00);
				border-radius: 10rpx;
				transform: translate(-50%,0);
			}
		}
		.action{
			text{
				font-size: 32rpx;
				opacity: 1;
			}
		}
	}
}
</style>
